{% extends "stocksys/base/base_page.html" %}
{% load staticfiles %}
{% block content %}
    <script src="{% static 'stocksys/js/echarts.min.js' %}" type="text/javascript" charset="utf-8"></script>
    <script src="{% static 'stocksys/js/k-line.js' %}" type="text/javascript" charset="utf-8"></script>
    {% csrf_token %}
    <div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div id="exchange" class="card" style="min-height: 350px">
                    <div class="header card-header-icon">
                        <h4 class="title" id="exchange.name"><i
                                class="ti-pulse"></i> {{ exchange.address_name }}-{{ exchange.name }}
                        </h4>
                    </div>
                    <div class="content " id="k-content" style="height:300px ;padding: 10px"></div>
                    <script>
                        var csrf = $('input[name="csrfmiddlewaretoken"]').val();
                        var year = new Date().getFullYear();
                        var url = "/stocksys/{{ exchange_type }}_info/{{ exchange.code }}/" + "{{ exchange.address }}/" + year;
                        $.ajax({
                            url: url,
                            data: {'csrfmiddlewaretoken': csrf},
                            dataType: "json",
                            type: "POST",
                            success: function (data) {
                                kdata = data["data"];
                                var kChart = echarts.init(document.getElementById('k-content'));
                                kChart.setOption(initKOption(kdata));
                                $("#k-content canvas").css({"width": "100%", "height": "100%"});
                                $("#k-content div").css({"width": "100%", "height": "100%"});
                            },
                            error: function (xhr, status, error) {

                            }
                        });
                    </script>

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <table class="table table-striped table-no-bordered table-hover">
                    <thead>
                    <tr>
                        <th>系统信息</th>
                        <th>值</th>
                    </tr>
                    <tbody>
                    <tr>
                        <th>模型精度</th>
                        <th>{{ accuracy }}</th>
                    </tr>
                    <tr>
                        <th>预测模型</th>
                        <th>{{ predict_model_name }}</th>
                    </tr>
                    <tr>
                        <th>上市日期</th>
                        <th>{{ exchange.start_date | date:'Y-m-d' }}</th>
                    </tr>
                    <tr>
                        <th>退市日期</th>
                        <th>{{ exchange.end_date | date:'Y-m-d' }}</th>
                    </tr>
                    <tr>
                        <th>缩写</th>
                        <th>{{ exchange.abbreviated_name }}</th>
                    </tr>

                    <tr>
                        <th>当前价</th>
                        <th>{{ call_auction.current }}</th>
                    </tr>
                    <tr>
                        <th>累计成交量（股）</th>
                        <th>{{ call_auction.volume }}</th>
                    </tr>
                    <tr>
                        <th>累计成交额（元）</th>
                        <th>{{ call_auction.money }}</th>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-md-5">
                <table id="datatables" class="table table-striped table-no-bordered table-hover"
                       style="width:100%;cellspacing:0">
                    <thead>
                    <tr>
                        <th>日期</th>
                        <th>未来收盘价</th>
                        <th>未来涨跌幅</th>
                    </tr>
                    <tbody>
                    {% for data in forecast_data %}
                        <tr class="{{ data.color }}">
                            <th>{{ data.date | date:'Y-m-d' }}</th>
                            <th>{{ data.Forecast|floatformat:3 }}</th>
                            <th>{{ data.Chg | floatformat:3 }}%</th>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            {% ifequal exchange_type 'stock' %}
                <div class="col-md-3">
                    <table class="table table-striped table-no-bordered table-hover">
                        <tbody>
                        <tr>
                            <th>五档卖量</th>
                            <th>五档买量</th>
                            <th>五档卖价</th>
                            <th>五档买价</th>
                        </tr>

                        <tr>
                            <th class="danger">{{ call_auction.a1_v }}</th>
                            <th class="success">{{ call_auction.b1_v }}</th>
                            <th class="danger">{{ call_auction.a1_p }}</th>
                            <th class="success">{{ call_auction.b1_p }}</th>
                        </tr>
                        <tr>
                            <th class="danger">{{ call_auction.a2_v }}</th>
                            <th class="success">{{ call_auction.b2_v }}</th>
                            <th class="danger">{{ call_auction.a2_p }}</th>
                            <th class="success">{{ call_auction.b2_p }}</th>
                        </tr>
                        <tr>
                            <th class="danger">{{ call_auction.a3_v }}</th>
                            <th class="success">{{ call_auction.b3_v }}</th>
                            <th class="danger">{{ call_auction.a3_p }}</th>
                            <th class="success">{{ call_auction.b3_p }}</th>
                        </tr>
                        <tr>
                            <th class="danger">{{ call_auction.a4_v }}</th>
                            <th class="success">{{ call_auction.b4_v }}</th>
                            <th class="danger">{{ call_auction.a4_p }}</th>
                            <th class="success">{{ call_auction.b4_p }}</th>
                        </tr>
                        <tr>
                            <th class="danger">{{ call_auction.a5_v }}</th>
                            <th class="success">{{ call_auction.b5_v }}</th>
                            <th class="danger">{{ call_auction.a5_p }}</th>
                            <th class="success">{{ call_auction.b5_p }}</th>
                        </tr>
                        </tbody>
                    </table>
                </div>
            {% endifequal %}
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="header">
                        <h4 class="title">预测走势</h4>
                    </div>
                    <div class="content">
                        <div class="chart chart-js-container">
                            <canvas id="predict_chart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="header">
                        <h4 class="title">频率分布</h4>
                    </div>
                    <div class="content">
                        <div class="chart chart-js-container">
                            <img src="data:image/png;base64,{{ frequency_analysis_image }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% ifequal exchange_type 'stock' %}
            <div class="row">
                <div class="col-md-12">
                    <table class="table table-striped table-no-bordered table-hover">
                        <tbody>
                        <tr>
                            <th>日期</th>
                            <th>融资余额(元）</th>
                            <th>融资买入额（元）</th>
                            <th>融资偿还额（元）</th>
                            <th>融券余量（股）</th>
                            <th>融券卖出量（股）</th>
                            <th>融券偿还量（股）</th>
                            <th>融资融券余额（元）</th>
                        </tr>
                        {% for financing in mtss %}
                            <tr>
                                <th>{{ financing.date | date:'Y-m-d' }}</th>
                                <th>{{ financing.fin_value }}</th>
                                <th>{{ financing.fin_buy_value }}</th>
                                <th>{{ financing.fin_refund_value }}</th>
                                <th>{{ financing.sec_value }}</th>
                                <th>{{ financing.sec_sell_value }}</th>
                                <th>{{ financing.sec_refund_value }}</th>
                                <th>{{ financing.fin_sec_value }}</th>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        {% endifequal %}
    </div>
{% endblock %}


{% block pagescript %}
    <script src="{% static 'stocksys/js/predict_chart.js' %}"></script>
    <script>
        var config = {
            type: 'line',
            data: {
                labels: [
                    {% for date in forecast_date %}
                        "{{ date }}",
                    {% endfor %}
                ],
                datasets: [{
                    label: "收盘价",
                    backgroundColor: "#FF6384",
                    borderColor: "#FF6384",
                    data: [
                        {% for price in forecast_price %}
                            {{ price }},
                        {% endfor %}
                    ],
                    fill: false,
                }]
            },
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: '预测走势'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: '日期'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: '收盘价'
                        }
                    }]
                }
            }
        };
        if ($('#predict_chart')[0]) {
            var predict_chart_canvas = $("#predict_chart").get(0).getContext("2d");
            var predict_chart = new Chart(predict_chart_canvas, config);
        }
    </script>


{% endblock %}

